<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="600px">
    <el-form ref="editFormRef" :model="editForm" :rules="rules" size="small">
      <el-form-item label="发布部门" :label-width="labelWidth" prop="deptNo">
        <!--        <el-select v-model="editForm.deptNo" placeholder="请选择楼层">-->
        <!--          <el-option v-for="item in roomFloorData" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
        <!--        </el-select>-->
        <el-cascader
          v-model="editForm.deptNo"
          :disabled="disabledItem"
          :options="departmentList"
          :props="{ checkStrictly: true, value: 'deptId', label: 'deptName', emitPath: false }"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="是否置顶" :label-width="labelWidth" prop="top">
        <el-select :disabled="disabledItem" v-model="editForm.top" placeholder="请选择是否置顶">
          <el-option v-for="item in topList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" :label-width="labelWidth" prop="title">
        <el-input
          v-model="editForm.title"
          :disabled="disabledItem"
          autocomplete="off"
          placeholder="请输入标题"
          maxlength="30"
        ></el-input>
      </el-form-item>
      <!--      <el-form-item label="时间" :label-width="labelWidth" prop="noticeTime">-->
      <!--        <el-date-picker-->
      <!--            value-format="yyyy-MM-dd HH:mm:ss"-->
      <!--            v-model="editForm.noticeTime"-->
      <!--            type="datetime"-->
      <!--            placeholder="选择日期">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item label="内容" :label-width="labelWidth" prop="content">
        <el-input
          :disabled="disabledItem"
          type="textarea"
          v-model="editForm.content"
          :rows="6"
          maxlength="140"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="hanldeSave('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addNotice, updateNotice } from '../js/notice'
import { RoomFloorData, DeviceList, meetingRoomType } from '../js/constants'
import pick from 'lodash.pick'
export default {
  name: 'RoleModal',
  props: ['departmentList'],
  data () {
    return {
      title: '公告新增',
      isAdd: false,
      dialogVisible: false, // 编辑弹窗
      labelWidth: '100px',
      disabledItem: false,
      topList: [
        {
          id: 0,
          name: '是'
        },
        {
          id: 1,
          name: '否'
        }
      ],
      roomFloorData: RoomFloorData,
      deviceList: DeviceList,
      options: meetingRoomType,
      editForm: {
        deptNo: '',
        top: '',
        title: '',
        // noticeTime: '',
        content: ''
      },
      model: {},
      rules: {
        deptNo: [{ required: true, message: '请选择发布部门', trigger: 'change' }],
        top: [{ required: true, message: '请选择顺序', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
        // noticeTime: [{ required: true, message: '请选择时间', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'change' }]
      }
    }
  },
  computed: {},
  filters: {
    usableTimeEnd: function (val) {
      if (val !== '23:59') {
        return val
      } else {
        return '24:00'
      }
    }
  },
  methods: {
    // 新增
    add () {
      this.edit({})
    },
    // 编辑
    edit (record) {
      if (!this.isAdd && record.status !== 100) {
        this.disabledItem = true
        this.title = '公告查看'
      }
      this.dialogVisible = true
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        if (this.model.no) {
          this.editForm = pick(
            this.model,
            'no',
            'deptNo',
            'top',
            'title',
            // 'noticeTime',
            'content'
          )
          this.editForm.deptNo = Number(this.editForm.deptNo)
        }
      })
    },
    handleCancel () {
      this.dialogVisible = false
      this.model = {}
      this.disabledItem = false
      this.$refs.editFormRef.resetFields()
    },
    hanldeSave (editFormRef) {
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          if (!this.isAdd && this.model.status !== 100) {
            return this.handleCancel()
          }
          let res, msg
          this.editForm.deptName = this.getTreeName(this.departmentList, Number(this.editForm.deptNo))
          const values = {
            ...this.editForm
          }
          if (!this.model.no) {
            res = await addNotice(Object.assign({}, values))
            msg = '保存成功！'
          } else {
            res = await updateNotice(Object.assign({}, values))
            msg = '修改成功！'
          }
          if (res.code === 0) {
            this.$message.success(msg)
          } else {
            this.$message.warning(res.msg)
          }
          this.$emit('ok')
          this.handleCancel()
        }
      })
    },
    getTreeName (treeList, id) {
      // for (let i of treeList) {
      //   if (i.deptId === id) {
      //     console.log(i)
      //     return i.deptName
      //   } else {
      //     return this.getTreeName(i.children, id)
      //   }
      // }
      let Deep, T, F
      for (F = treeList.length; F;) {
        T = treeList[--F]
        if (id === T.deptId) return T.deptName
        if (T.children) {
          Deep = this.getTreeName(T.children, id)
          if (Deep) return Deep
        }
      }
    },
    formatter (row, column, cellValue) {
      return this.$base.constFormatter(meetingRoomType, cellValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select,
  .el-cascader {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>
